<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../css/bootstrap.css" />
    <title>响应式布局</title>
  </head>
  <body>
    <!-- 需求：四个盒子，在中型设备上每个盒子占用6列，大型设备占4列，超大型设备占3列 -->
    <div class="container">
      <div class="row">
        <div class="col-md-6 col-lg-4 col-xl-3">
          <h1>HTML</h1>
          <p>
            HTML是描述结构的标准标记语言的网页。我们的HTML教程将帮助您了解HTML的基础知识最新的HTML5语言，这样你就可以创建自己的网站。
          </p>
        </div>
        <div class="col-md-6 col-lg-4 col-xl-3">
          <h1>CSS</h1>
          <p>
            CSS用于描述网页的呈现。CSS可以节省大量的时间和精力。我们的CSS教程将帮助你学习这些技巧最新的CSS3的首字母，这样你就可以控制你的网站的风格和布局.
          </p>
        </div>
        <div class="col-md-6 col-lg-4 col-xl-3">
            <h1>JavaScript</h1>
          <p>
            JavaScript是最流行和广泛使用的客户端脚本语言。我们的JavaScript教程将提供JavaScript的深入知识，包括ES6特性，以便您可以创建互动网站。
          </p>
        </div>
        <div class="col-md-6 col-lg-4 col-xl-3">
            <h1>Bootstrap</h1>
          <p>
            Bootstrap是一个强大的前端框架，用于更快，更容易的web开发。我们的Bootstrap教程将帮助您学习最新的Bootstrap 4框架的所有功能，以便您可以轻松创建响应式网站。
          </p>
        </div>
      </div>
    </div>
  </body>
</html>
